import QtQuick 2.7
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import ChatController 1.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.2

Page {
    id: page
    width: Screen.desktopAvailableWidth
    height: Screen.desktopAvailableHeight *0.9
    property alias scrollView: scrollView
    property alias messageInput:messageInput
    property alias chatController:chatController
    property alias addMouseArea: addMouseArea
    property alias voiceMouseArea: voiceMouseArea
    property size imgSize
    property size headImgSize
    property size trangleImgSize
    state:"closeVoice"
    states:[
        State{
            name:"closeVoice"
            PropertyChanges {
                target: voiceImg;
                source:"images/voice.png"
            }
        },
        State{
            name:"openVoice"
            PropertyChanges {
                target: voiceImg;
                source:"images/voice-send.png"
            }
        }
    ]

    title: qsTr("Chat")

    ChatController {
        id: chatController
    }
    ColumnLayout {
        width: parent.width
        height: Screen.desktopAvailableHeight *0.9

        ScrollView {
            id: scrollView
            Layout.fillWidth: true
            Layout.fillHeight: true

            ScrollBar.vertical: ScrollBar {
                parent: scrollView
                x: scrollView.mirrored ? 0 : scrollView.width - width
                y: scrollView.topPadding
                height: scrollView.availableHeight
                active: scrollView.ScrollBar.horizontal.active
            }

            ScrollBar.horizontal: ScrollBar {
                parent: scrollView
                x: scrollView.leftPadding
                y: scrollView.height - height
                width: scrollView.availableWidth
                active: scrollView.ScrollBar.vertical.active
            }

            background: Rectangle {
                border.color: "#FFFFFF"
                color: "#F8F8F8"
            }

            ListView {
                id: listView
                model: chatController.messageModel
                spacing: 20
                delegate: Rectangle {
                    width: scrollView.width
                    height: childrenRect.height
                    color: "#F8F8F8"
                    RowLayout {
                        layoutDirection: senderid == 2 ? Qt.RightToLeft : Qt.LeftToRight
                        spacing: 0
                        Image {
                            source: "images/head-48.png"
                            sourceSize: headImgSize
                            Layout.alignment: Qt.AlignHCenter
                            Layout.leftMargin: 30
                            Layout.rightMargin: 30
                        }
                        Image {
                            source: senderid
                                    == 2 ? "images/trangle-right.png" : "images/trangle-left.png"
                            sourceSize: trangleImgSize
                            Layout.leftMargin: senderid == 2 ? -10 : 0
                            Layout.rightMargin: senderid == 2 ? 0 : -10
                            Layout.topMargin: -20
                            ColorOverlay {
                                anchors.fill: parent
                                source: parent
                                color: "#FFFFFF"
                            }
                        }

                        Rectangle {
                            radius: 5
                            Layout.preferredWidth: childrenRect.width + 10
                            Layout.preferredHeight: childrenRect.height + 10

                            color: "#FFFFFF"
                            Loader{
                                sourceComponent:msgtype == 3?msg_delegate_content_audio:msg_delegate_content_text
                                onLoaded:{
                                    binder.target = this.item
                                }
                            }

                            Binding{
                                id:binder
                                property:"message"
                                value:message
                            }
                        }
                    }
                }

                Component{
                    id:msg_delegate_content_text
                    Label {
                        property string message
                        text: message
                        anchors.centerIn: parent
                        width: this.text.length > 20 ? 17 * 20 : this.text.length * 17

                        color: "#5F6873"

                        font {
                            pixelSize: 17
                        }
                        wrapMode: Text.WordWrap
                    }
                }

                Component{
                    id:msg_delegate_content_audio
                    Image{
                        property string message
                        property bool isPlay:false
                        source:"images/audio-low.png"
                        anchors.centerIn: parent
                        sourceSize: Qt.size(40,40)
                        MouseArea{
                            anchors.fill: parent
                            onClicked:{
                                parent.source = parent.isPlay?"images/audio-high.png":"images/audio-low.png"
                                chatController.chatAudio.outputToggleMode(message)
                                parent.isPlay = !parent.isPlay
                            }
                        }
                    }
                }
            }
        }

        RowLayout {
            Layout.preferredHeight: 40
            Layout.fillWidth: true
            Image {
                id: voiceImg
                Layout.preferredHeight: 34
                Layout.preferredWidth: 34
                source: "images/voice.png"
                sourceSize: imgSize
                Layout.alignment: Qt.AlignHCenter
                MouseArea {
                    id: voiceMouseArea
                    anchors.fill: parent
                }
            }

            TextField {
                id: messageInput
                text: ""
                placeholderText: ""
                horizontalAlignment: Text.AlignLeft
                Layout.fillWidth: true
                Layout.preferredHeight: 34
                font.pixelSize: 14
                background: Rectangle {
                    implicitWidth: 200
                    implicitHeight: 40
                    color: messageInput.enabled ? "transparent" : "#353637"
                    border.color: messageInput.enabled ? "#21be2b" : "transparent"
                }
            }

            Image {
                id: emojiImg
                Layout.preferredHeight: 34
                Layout.preferredWidth: 34
                sourceSize: imgSize
                source: "images/emoji.png"
                Layout.alignment: Qt.AlignHCenter
            }

            Image {
                id: addImg
                Layout.preferredHeight: 34
                Layout.preferredWidth: 34
                source: "images/add.png"
                sourceSize: imgSize
                Layout.alignment: Qt.AlignHCenter
                MouseArea {
                    id: addMouseArea
                    anchors.fill: parent
                }
            }
        }
    }


}
